<template>
  <view :class="[ 'list-item', `no-${index}` ]">
    {{ JSON.stringify(item) }}
    <div class="icon"></div>
    <div class="profile"></div>
    <div class="username"></div>
    <div class="score"></div>
  </view>
</template>

<script>
export default {
  name: 'ListItem1',
  props: {
    item: { type: Object, default: () => ({}) },
    index: { type: Number, default: -1 }
  },
  data() {
    return {
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.list-item {
  width: 311px;
  height: 56px;
  border-radius: 8px 8px 0px 0px;

  &.no-0 {
    background: linear-gradient(270deg,rgba(255,255,255,0.00) 0%, #fcf0db 1%);
  }

  &.no-1 {
    background: linear-gradient(270deg,rgba(255,255,255,0.00) 0%, #d9e5f9 1%);
  }

  &.no-2 {
    background: linear-gradient(270deg,rgba(255,255,255,0.00) 0%, #fbd8dc 1%);
  } 


  border-radius: 8px 8px 0px;
}
</style>